<template>
  <el-container>
    <el-header>
      <my-title :title="'建议'" />
    </el-header>
    <el-main v-loading="loading">
      <!-- Create the editor container -->
      <div id="editor" ref="editor" class="editor" />
    </el-main>
    <el-footer>
      <el-row :gutter="20">
        <el-col :span="12" :offset="6">
          <div class="grid-content bg-purple" style="text-align: center;">
            <el-button type="primary" @click="addSuggestClick">提交</el-button>
          </div>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>
<script>
import Quill from 'quill'
import request from '@/utils/request'
export default {
  props: {
    task: {
      type: Object,
      default: () => {}
    }
  },
  data: function() {
    return {
      edit: false,
      qusEditor: {},
      contentHtml: '',
      feedback_suggest: {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    init: function() {
      this.$nextTick(() => {
        this.qusEditor = new Quill(this.$refs.editor, {
          theme: 'snow'
        })
        this.query()
      })
    },
    query: function() {
      this.$progress.start()
      request({
        url: '/feedback/suggest/querySuggestByTask',
        method: 'post',
        data: this.task
      }).then(res => {
        this.$progress.done()
        if (res.result) {
          if (res.data) {
            if (this.qusEditor) {
              this.edit = true
              this.feedback_suggest = res.data
              this.contentHtml = this.feedback_suggest.suggest
              this.qusEditor.insertText(0, this.contentHtml, true)
              // this.setContent()
            }
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { this.$progress.done() })
    },
    getContent: function() {
      const html = document.querySelector('#editor').children[0].innerHTML
      const delta = this.qusEditor.getContents()
      const text = this.qusEditor.getText(0, 10000)
      console.log(delta)
      console.log(text)
      this.contentHtml = text
    },
    setContent: function() {
      this.qusEditor.setContents([
        { insert: 'Hello ' },
        { insert: 'World!', attributes: { bold: true }},
        { insert: '\n' }
      ])
    },
    addSuggestClick: function() {
      this.getContent()
      if (this.contentHtml) {
        this.addSuggestAllTask()
      } else {
        this.$message.error('请填写您的宝贵意见!')
      }
    },
    addSuggestTask: function() {
      this.$progress.start()
      this.feedback_suggest.suggest = this.contentHtml
      request({
        url: '/feedback/suggest/add',
        method: 'post',
        data: this.feedback_suggest
      }).then(res => {
        this.$progress.done()
        if (res.result) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      }
      ).catch(() => { this.$progress.done() })
    },
    addSuggestAllTask: function() {
      this.$progress.start()
      this.feedback_suggest.suggest = this.contentHtml
      request({
        url: '/feedback/suggest/addAll',
        method: 'post',
        data: {
          feedback_suggest: this.feedback_suggest,
          task: this.task
        }
      }).then(res => {
        this.$progress.done()
        if (res.result) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      }
      ).catch(() => { this.$progress.done() })
    }
  }
}
</script>
<style>
  .editor {
    min-height: 350px;
  }
</style>
